<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>道闸车辆出入信息</title>
	<link rel="stylesheet" type="text/css" href="/css/login.css">
	<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="/js/vue.js"></script>
	<script type="text/javascript" src="/js/config.js"></script>
	<script type="text/javascript" src="/js/paging.js"></script>
	<script type="text/javascript" src="../js/filter.js"></script>
</head>
<body style="background:#fff;">
<form id="searchForm" style="display: none;">
	<div class="search-bar clearfix panel" style="height: auto;padding-bottom: 0px;">
		<div class="box">
			<div class="cell-search" >
				<label>选择市场</label>
				<select name="marketId">
					<option value="">全部市场</option>
					<option v-for="marketItem in marketList" :value="marketItem.marketId">{{marketItem.marketName}}</option>
				</select>
				<label>RFID查询</label>
				<input type="text" name="carRfid" id="carRfid">
				<label>创建时间查询</label>
				<label>开始时间</label>
				<input type="date" name="startTime" id="startTime" >
				<label>截止时间</label>
				<input type="date" name="endTime" id="endTime" >
			</div>
			<div class="search-btn-box">
				<button type="button" id="serchGateCar">查询</button>
			</div>
		</div>
	</div>
</form>
<script type="text/javascript" src="../js/search.js"></script>
<div class="" id="app">
	<table class="list-box gatecar-table">
		<thead>
		<tr>
			<th>停车卡号</th>
			<th>车辆出入图片</th>
			<th>停车费用</th>
			<th>车辆RFID</th>
			<th>车辆出入闸状态</th>
			<th>所属市场</th>
			<th>创建时间</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="re in res">
			<td>
				<p>{{re.carCard}}</p>
			</td>
			<td class="gatecar-img"><img v-bind:src="imgUrl + re.carImage + '.w_200xh_200'"></td>
			<td>
				<p>{{re.carFee}}</p>
			</td>
			<td>
				<p>{{re.carRfid}}</p>
			</td>
			<td>
				<p>{{re.carState == 1 ? '入' : '出'}}</p>
			</td>
			<td>
				<p>{{re.market.marketName}}</p>
			</td>
			<td>
				<p>{{re.carCreateTime | filterGetTime}}</p>
			</td>
		</tr>
		</tbody>
	</table>
</div>
<div id="page" class="page_div"></div>

</body>
<script type="text/javascript">

    var vm = new Vue({
        el:'#app',
        data: {
            res:[],
            carState : 1,
            imgUrl : imgUrl,
            marketId : marketId
        },
        methods: {

        },
    });

    var pageIndexNow = 1;
    if (marketId == 1){
        marketId = null;
    }
    $.ajax({
        type: "get",      //data 传送数据类型。post 传递
        dataType: 'json',  // 返回数据的数据类型json
        url: defaultUrl+"/controller/gate/getGateCarNum",  // yii 控制器/方法
        cache: false,
        data: {'marketId': marketId},  //传送的数据
        error:function(){
            alert("数据传输错误");
        },success: function (data) {

            console.log(data);
            if (data.code != 1) {
                return false
            }
            var pageTotal = data.result.total;
            var pageNumTotal = Math.ceil(pageTotal/5);
            $("#page").paging({
                pageNo:pageIndexNow,
                totalPage: pageNumTotal,
                totalSize: pageTotal,
                callback: function(num) {
                    pageIndexNow = num;
                    initList(num);
                }
            });
        }
    });

    function initList(pageIndex){

        if (marketId == null){
            $("#searchForm").show();
        }

        $.ajax({
            type: "get",      //data 传送数据类型。post 传递
            dataType: 'json',  // 返回数据的数据类型json
            url: defaultUrl+"/controller/gate/getGateCarList",  // yii 控制器/方法
            cache: false,
            data: {'pageIndex': pageIndex,'pageSize':'5','marketId':marketId},  //传送的数据
            error:function(){
                alert("数据传输错误");
            },success: function (data) {
                console.log(data);
                if (data.code != 1) {
                    return false
                }
                vm.res = data.result;
            }
        });
    }
    initList(1);

</script>
</html>


































